<template>
	<view style="height:100vh;">
		<layout>
			<a-spin :spinning="spinning" style="width:100%" />
			<div class="cards-container">
				<div v-for="(item, index) in data" :key="index" class="card-item-container">
					<a-card class="custom-card" :body-style="{ padding: '24px' }" hoverable>
						<template #title>
							<div class="card-title">
								<star-outlined style="color: #3b82f6; margin-right: 8px;" />
								{{ item.title }}
							</div>
						</template>
						<template #extra>
							<tag color="blue">{{ item.extra }}</tag>
						</template>

						<div class="card-content">
							<div class="info-grid">
								<div class="info-item">
									<idcard-outlined style="margin-right: 6px;" />
									<span class="info-label">订单号:</span>
									<span class="info-value">{{ item.orderNumber }}</span>
								</div>
								<div class="info-item">
									<dashboard-outlined style="margin-right: 6px;" />
									<span class="info-label">物料类别:</span>
									<span class="info-value">{{ item.engineCapacity }}</span>
								</div>
								<div class="info-item">
									<environment-outlined style="margin-right: 6px;" />
									<span class="info-label">存放位置:</span>
									<span class="info-value">{{ item.storageLocation }}</span>
								</div>
								<div class="info-item">
									<calendar-outlined style="margin-right: 6px;" />
									<span class="info-label">盘亏日期:</span>
									<span class="info-value">{{ item.lossDate }}</span>
								</div>
								<div class="info-item">
									<number-outlined style="margin-right: 6px;" />
									<span class="info-label">数量:</span>
									<span class="info-value highlight">{{ item.quantity }}</span>
								</div>
							</div>
						</div>
					</a-card>
				</div>
			</div>
		</layout>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		addWarehouseCheck,
		delWarehouseCheck,
		exportWarehouseCheck,
		getWarehouseCheck,
		listWarehouseCheck,
		updateWarehouseCheck
	} from "@/api/warehouse/warehouseCheck";
	// 模拟数据
	const data = ref([]);
	import {
		getQueryData
	} from "@/api/query/comQuery";
	import {
		getDicts
	} from "@/api/system/dict/data";
	const spinning = ref(true);

	async function getDictVaule(name, id) {
		try {
			const ref = await getDicts(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}

	async function getQuery(name, id) {
		try {
			const ref = await getQueryData(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}
	async function getList() {
		try {
			const ref = await listWarehouseCheck({
				pageNum: 1,
				pageSize: 100,

			});
			console.log(ref)
			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				let a = {
					title: '订单' + item.id,
					extra: item.stockMonth,
					orderNumber: item.serialNo,
					engineCapacity: item.materialName,
					storageLocation: item.warehouseName,
					lossDate: item.checkDate,
					quantity: item.inventory
				};

				d.push(a);
			}

			data.value = d;
			spinning.value = false;
			console.log(data.value)
		} catch (error) {
			console.error("获取列表失败:", error);
		}
	}
	getList()
</script>

<style scoped>
	/* 卡片容器 */
	.cards-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
		gap: 24rpx;
		padding: 30rpx;
		background: linear-gradient(165deg, #f6fbf8, #e8f5f0);
		min-height: 100vh;
	}

	/* 卡片容器动画 */
	.card-item-container {
		transition: all 0.3s ease;
		animation: fadeIn 0.4s ease-out forwards;
		opacity: 0;
	}

	/* 卡片进入动画 */
	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(20rpx); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* 为不同卡片添加延迟动画 */
	.card-item-container:nth-child(1) { animation-delay: 0.1s; }
	.card-item-container:nth-child(2) { animation-delay: 0.15s; }
	.card-item-container:nth-child(3) { animation-delay: 0.2s; }
	.card-item-container:nth-child(4) { animation-delay: 0.25s; }
	.card-item-container:nth-child(5) { animation-delay: 0.3s; }
	.card-item-container:nth-child(6) { animation-delay: 0.35s; }
	.card-item-container:nth-child(7) { animation-delay: 0.4s; }
	.card-item-container:nth-child(8) { animation-delay: 0.45s; }

	.card-item-container:hover {
		transform: translateY(-6rpx);
		box-shadow: 0 20rpx 30rpx -10rpx rgba(39, 174, 96, 0.15);
	}

	/* 卡片样式 */
	:deep(.custom-card) {
		border-radius: 20rpx !important;
		overflow: hidden;
		border: 1px solid rgba(39, 174, 96, 0.1) !important;
		box-shadow: 0 10rpx 30rpx -5rpx rgba(39, 174, 96, 0.1);
		background: linear-gradient(145deg, #ffffff, #f9fafb) !important;
	}
	
	/* 卡片标题样式 */
	:deep(.ant-card-head) {
		border-bottom: 1px solid rgba(39, 174, 96, 0.1) !important;
		padding: 0 24rpx !important;
		min-height: 90rpx !important;
		background: linear-gradient(90deg, rgba(39, 174, 96, 0.05), rgba(46, 204, 113, 0.02));
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		display: flex;
		align-items: center;
	}

	/* 标签样式 */
	:deep(.ant-tag) {
		border-radius: 30rpx !important;
		padding: 4rpx 20rpx !important;
		font-size: 24rpx !important;
		box-shadow: 0 4rpx 8rpx rgba(59, 130, 246, 0.1);
	}
	
	/* 卡片内容区 */
	.card-content {
		padding: 16rpx 0;
	}

	/* 信息网格布局 */
	.info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	/* 单个信息项 */
	.info-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		position: relative;
		padding-left: 10rpx;
	}
	
	.info-item:nth-child(1),
	.info-item:nth-child(2) {
		grid-column: span 2;
	}
	
	.info-item:before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 4rpx;
		height: 24rpx;
		background-color: #27ae60;
		border-radius: 2rpx;
	}

	.info-label {
		font-weight: 500;
		margin-right: 12rpx;
		color: #4a6572;
		min-width: 140rpx;
	}

	.info-value {
		color: #2c3e50;
		font-weight: 500;
	}

	/* 高亮数值 */
	.highlight {
		color: #27ae60;
		font-weight: 600;
		font-size: 30rpx;
	}
	
	/* 图标样式 */
	:deep(.anticon) {
		color: #27ae60 !important;
		margin-right: 10rpx;
		font-size: 30rpx;
	}

	/* 响应式设计 */
	@media (max-width: 767px) {
		.cards-container {
			grid-template-columns: 1fr;
			padding: 16rpx;
		}
		
		.info-grid {
			grid-template-columns: 1fr;
		}
		
		.info-item:nth-child(1),
		.info-item:nth-child(2) {
			grid-column: span 1;
		}
	}
</style>